* 
{ 
    margin: 0;
    padding: 0;
}

body 
{ 
    font: 14px Georgia, serif; 
}

h1 { 
    width: 660px; 
    margin: 0 auto;
    padding: 20px 0;
    color: #222;
}

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}

.tabs { 
    list-style: none; 
    margin: 60px auto 0; 
    width: 825px;
}
.tabs li { 
    float: left; 
    position: relative; 
}
.tabs a { 
    cursor: pointer;
    float: left; 
    padding: 10px 40px; 
    text-decoration: none;

    color: black;
    background: #e5e5e6; 

    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px; 
    cursor:pointer;
}
.tabs .active {
    z-index: 3;
}
.tabs .active a { 
    background: white; 
    color: black; 
}
.tabs li:before, .tabs li:after, 
.tabs li a:before, .tabs li a:after {
    position: absolute;
    bottom: 0;
}

.tabs li:last-child:after,   .tabs li:last-child a:after,
.tabs li:first-child:before, .tabs li:first-child a:before,
.tabs .active:after,   .tabs .active:before, 
.tabs .active a:after, .tabs .active a:before {
    content: "";
}
.tabs .active:before, .tabs .active:after {
    background: white; 
    z-index: 1;
}


.tabs li:before {
    left: -10px;      
}
.tabs li:after { 
    right: -10px;
}

.tabs .active a:after, .tabs .active a:before {
    background:transparent;
}

.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
    background:transparent;

}
.tabs li a:before {
    left: -20px;
}
.tabs li a:after {
    right: -20px;
}
